<template>
    <div class="box container">
       <h1 class="ttitle">全部分类</h1>
       <ul class="ul">
        <li class="li" v-for="item in list" :key="item.id" @click="goSanji(item.id)">
            <div class="imgBox">
                <img :src="item.picture" alt="" class="img">
            </div>
            <p class="desc">{{ item.name }}</p>
        </li>
       </ul>
    </div>
</template>

<script>
    export default {
        props:{
            list:{
            type:Array,
            default:()=>[]
        }
        },
        methods:{
            goSanji(id){
                this.$router.push({
                    path:"/sanji",
                    query:{
                        Iid:id
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
.box{
    background-color: #fff;
    box-sizing: border-box;
    padding: 20px;
    margin: 20px auto;
    .ttitle{
        width: 100%;
        height: 60px;
        line-height: 60px;
        font-size: 24px;
        font-weight: 500;
        color: #999;
        text-align: center;
    }
    .ul{
        display: flex;
        justify-content: left;
        li{
            width: 200px;
            height: 220px;
            .imgBox{
                width: 140px;
                height: 140px;
                margin: 0 auto;
                .img{
                    width: 140px;
                    height: 140px;
                    background-color: #fff;
                }
            }
            .desc{
                font-size: 18px;
                color: #000;
                text-align: center;
                margin-top:10px ;
            }
        }
    }
}
</style>